<template>
  <div class="register">
    <teleport to=".app-header">
      <van-nav-bar
        title="注册"
        left-text="返回"
        left-arrow
        @click-left="back"
      ></van-nav-bar>
    </teleport>
    <van-form ref="formAdd" autocomplete="off" class="register-form" @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="info.tel"
          name="tel"
          label="手机号"
          placeholder="手机号"
          :rules="telRules"
        />
        <van-field
          v-model="info.password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />

        <van-field
          v-model="info.code"
          center
          clearable
          name="code"
          label="短信验证码"
          placeholder="请输入短信验证码"
          :rules="codeRules"
        >
          <template #button>
            <van-button size="small" type="primary" @click="sendMsgCode"
              >发送验证码</van-button
            >
          </template>
        </van-field>
      </van-cell-group>

      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit"> 提交 </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import {
  doCheckPhoneAPI,
  doFinishRegisterAPI,
  doSendMsgCodeAPI,
  doCheckCodeAPI,
} from "@/api/user.js";
import { showSuccessToast, showFailToast } from "vant";
import { useRouter } from "vue-router";

let router = useRouter();

let info = reactive({
  tel: "",
  password: "",
  code: "",
});

// 17386141517
const validatorTel = async (val) => {
  console.log("接收手机号", val);
  try {
    var res = await doCheckPhoneAPI({ tel: val });
    console.log(res);
    showSuccessToast("可以使用的手机号");
    return true;
  } catch (err) {
    showFailToast(err.message);
    return false;
  }
};

let telRules = [
  { required: true, message: "请填写手机号" },
  { pattern: /^1[3-9]\d{9}$/, message: "请填写正确的手机号" },
  { validator: validatorTel, message: "改手机号已被注册" },
];

let validatorCode = async (code) => {
  // console.log("传入code", code);
  try {
    var res = await doCheckCodeAPI({ tel: info.tel, telcode: code });
    console.log(res);
    showSuccessToast("可以使用的手机号");
    return true;
  } catch (err) {
    showFailToast(err.message);
    return false;
  }
};
let codeRules = [
  { required: true, message: "请输入验证码" },
  { validator: validatorCode, message: "请输入正确的验证码" },
];

// doSendMsgCodeAPI
let sendMsgCode = async () => {
  try {
    var result = await doSendMsgCodeAPI({ tel: info.tel });
    // console.log(result);
    showSuccessToast("验证码发送成功");
    info.code = result.data;
    return true;
  } catch (err) {
    showFailToast(err.message);
    return false;
  }
};

let formAdd = ref();
let onSubmit = async () => {
  console.log(11111, formAdd.value);
  var res = formAdd.value.getValidationStatus();
  console.log(22222, res);

  // var list = Object.values(res);
  // var flag = list.reverse((v) => v == "passed");
  if (res.tel == "passed" && res.password == "passed" && res.code == "passed") {
    try {
      var result = await doFinishRegisterAPI({ tel: info.tel, password: info.password });
      console.log(result);
      showSuccessToast("注册成功");
      router.push("/login");
      return true;
    } catch (err) {
      showFailToast(err.message);
      return false;
    }
  }
};
</script>

<style lang="scss" scoped>
.register {
  width: 100%;
  height: 100%;
  background-color: #f9f9f9;

  // sass在解析为css时,将&替换为父选择器
  // &-form => .register-form
  &-form {
    margin-top: 50px;
  }
}
</style>
